<template>
       <div class="app">
          <header class="mint-header"><div class="mint-header-button is-left"><a href="#/home" class="router-link-active"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div> <h1 class="mint-header-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;  font-size:16px;">男性健康</font></font></h1> <div class="mint-header-button is-right"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-more"></i></span> <label class="mint-button-text"></label></button></div></header>
        <mt-swipe :auto="5000">
         <mt-swipe-item v-for="item in list1" :key="item.id">
            <img :src="item.img_url" alt="">
         </mt-swipe-item>
       </mt-swipe>
        <!-- <div><img src="http://127.0.0.1:3000/img/nanxing2.jpg" alt=""></div>  -->
        <div class="tuijian"><img src="http://127.0.0.1:3000/img/rexiaotuijian.png" alt=""></div> 
        <div class="nanxinglist" >
            <div class="nanxing-item" v-for="item of list" :key="item.id"  @click="getDetail(item.lid)">
                 <img :src="item.pic" alt=""   >
                <p class="title">{{item.title}}</p>
                <p class="info">{{item.info}}</p>
                <p class="btn-nanxing">
                <span class="price">￥{{item.price.toFixed(2)}}</span>
                <span class="sale" >立即购买</span>
                </p>
            </div>
        </div>
        </div>
            
</template>
<script>
    export default{
    data(){
        return{list:[],list1:[]}
    },
    methods:{
        getlist(){
        var url="http://127.0.0.1:3000/getnanxinglist"
        this.$http.get(url).then(result=>{
            this.list=result.body;
            // console.log(result.body)
        });
        },
        getlist1(){
        var url="http://127.0.0.1:3000/nxlunbo"
        this.$http.get(url).then(result=>{
            this.list1=result.body;
             console.log(result.body);
        });
        },
        getDetail(lid){
            console.log(lid);
            this.$router.push("/home/goodsinfo?id="+lid);
        },
       
    },
    created(){
        this.getlist();
         this.getlist1();
    }
}
</script>
<style>
   .nanxinglist{
       display: flex;
       flex-wrap:wrap;
       justify-content:space-between;
       padding: 5px; 
   }
   .nanxinglist .nanxing-item{
       width: 49%;
       height: 266px;
       border: 1px solid #ccc;
       border-radius:10px; 
       box-shadow: 0 0 8px #ccc;
       margin-bottom: 10px;
       
   }
   .nanxinglist .nanxing-item img{
    display: block;
    width: 154px;
    height: 154px;
    margin: 10px;
    margin: 10px auto;
   }
   .nanxinglist .nanxing-item p{
       margin: 0 10px 0 10px;
       height: 19px;
       
       
   }
   .nanxinglist .nanxing-item .title{
       color: red;
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
   }
   .nanxinglist .nanxing-item .info{
       margin-bottom: 10px;
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
   }
   .nanxinglist .nanxing-item span{
      
       font-size: 15px;
   }
   .btn-nanxing{
       display: flex;
       justify-content: space-between;
    
   }
   .nanxinglist .nanxing-item .btn-nanxing .sale{
       display: inline-block;
       height: 30px;
       width: 68px;
       text-align: center;
       line-height: 30px;
       margin-right: 10px;
       border: 1px solid red;
       border-radius: 15px;
       background: #f40;
       color: aliceblue;
       font-size: 12px;
       
       
   }
   .tuijain{
       margin-top:20px;
       margin-bottom: 10px; 
   }
   .tuijian img{
       width: 100%;
   }
   div.mint-swipe{
      height: 170px;
  }
  div.mint-swipe  img{
      height: 170px;
      width: 100%;
  }
</style>


